<script setup>

</script>

<template>
  <div class="container">
    <div class="left">
      <div class="leftphoto">
        <img src="../../../assets/eshopping/painting.png" alt="很出名的画" style="box-shadow: 0 0 10px rgba(0,0,0,0.5);" width="500" height="700"   />
      </div>
    </div>
    <div class="right">
      <div class="painting-info">
        <h2 style="color: #666462;">《很出名的画》</h2>
        <button class="jifen-button"><b>积分余额：1500</b></button>
        <h3 style="color:#666462">已售20</h3>
        <h3 style="color:#666462">宋代   X派系</h3>
      </div>
      <div class="action-buttons">
        <button class="buy-button">购买</button>
        <button class="cart-button">加入购物车</button>
      </div>
      <div class="content">
        <p><b>可能需要科普or介绍一下我猜。。。。</b></p>
        <p><b>可能需要科普or介绍一下我猜。。。。</b></p>
        <p><b>可能需要科普or介绍一下我猜。。。。</b></p>
        <p><b>可能需要科普or介绍一下我猜。。。。</b></p>
        <p><b>可能需要科普or介绍一下我猜。。。。</b></p>
      </div>

    </div>
  </div>
</template>

<style scoped>
.container{
  background-color: #f6f3f0;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  display: flex; /* 使用flex布局来更好地控制左右两边的排列 */
  align-items: center; /* 垂直居中 */
}
.left{
  width: 45%;
  height: 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  background-color: #F4F2EE;
}
.right{
  width: 55%; /* 增加宽度以适应更多的内容 */
  height: 100%;
  padding: 20px;
  overflow-y: auto; /* 如果内容超出，允许垂直滚动 */
  box-sizing: border-box; /* 使得padding和border不会增加元素的总宽度 */
  background-color: #F4F2EE;
  /*border-left: 1px solid #ccc; !* 左边框，以便区分左右区域 *!*/
}
.painting-info h2{
  margin-bottom: 15px;
}
.painting-info h3 {
  margin-bottom: 15px; /* 增加元素之间的间距 */
}

.painting-info h2{
  font-size: 48px;
}
.jifen-button{
  border:none;
  background-color: #DDD9CF;
  width: 137px;
  height: 40px;
  border-radius: 12px;
  float:right;
  font-size:16px;
}
.buy-button{
  height: 40px;
  width: 75px;
  border:none;
  border-radius: 15px;
  margin-right:50px;
  background-color: #DEC687;
  text-align: center;
  margin-bottom: 30px;
  font-size: 18px;
}
.cart-button{
  height: 40px;
  width: 110px;
  border:none;
  border-radius: 15px;
  margin-right:100px;
  background-color: #E1D8C2;
  text-align: center;
  margin-bottom: 30px;
  font-size: 18px;
}
.content{
  font-size: 20px;
  margin-right: 300px;
}
.content p {
  margin: 0 0 1em 0; /* 为段落设置底部外边距，以便在它们之间有空间 */
}
.right {
  /* 确保右侧容器使用flex布局 */
  display: flex;
  flex-direction: column; /* 垂直布局 */
}

.left{
  margin-top:80px;
}
.leftphoto{
  margin-top:80px;
}
.leftphoto img{
  border-radius: 15px;
}
</style>
